<template>
	<div class="folder">
		<div class="content" @click="onClick">
			<div class="icon flex-center" :class="{ expand: myValue }">
				<el-icon><ArrowRight /></el-icon>
			</div>
			<div class="path">
				<span>{{ path }}</span>
			</div>
		</div>

		<div class="children" v-show="myValue">
			<slot></slot>
		</div>
	</div>
</template>

<script setup lang="ts">
import { watch, ref } from 'vue';
import { ArrowRight } from '@element-plus/icons-vue';

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: true,
	},
	path: String,
});

const emits = defineEmits(['update:modelValue']);

let myValue = ref(props.modelValue);

watch(
	() => props.modelValue,
	(n) => {
		myValue.value = n;
	}
);

watch(myValue, () => {
	emits('update:modelValue', myValue.value);
});

function onClick() {
	myValue.value = !myValue.value;
}
</script>

<style scoped lang="scss">
.folder {
	.content {
		height: 32px;
		display: flex;
		align-items: center;
		cursor: pointer;
		user-select: none;
		.icon {
			font-size: 18px;
			width: 32px;
			height: 100%;
			transition: 80ms;
			&.expand {
				transform: rotate(90deg);
			}
		}
		.path {
			font-size: 13px;
			user-select: text;
			margin-left: 2px;
		}
		&:hover {
			background-color: var(--mouse-hover-bg-color-1);
		}
	}
	.children {
		width: 100%;
	}
}
</style>
